<!DOCTYPE html>
<html>
  <head>
    <title>form.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  	<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
	<style type="text/css">
	.redColor {
		color:red;
	}
	.blueColor{
		color:blue;
	}
</style>
    <script type="text/javascript">	
		$(function(){
			//文档加载完毕时初始化调用
			//var userName=$('#idUserName').val(); //通过id属性获取<input id="idUserName"对象的value值
			//alert(userName);
			//$('#idUserName').val('lisi');//修改<input id="idUserName"对象的value值
			
			//var inputs=$('input');
			//alert("input 元素个数："+inputs.length);
			
			//var form=$('form').eq(0); //通过标签名称，取第一个form元素对象（使用筛选器） 
			//var form=$('form:eq(0)'); //选择器
			//alert(form.html()); //显示form对象中的html <=> form.innerHTML
			//form.html("<input type='button' value='修改了的form'/>");  //修改form对象中的html
			
			//alert(form.css('color'));//操作样式 .css('样式名称'),
			//form.css('background-color','red'); //给某个样式赋值
			
			//var userNameType=$('#idUserName').attr('type'); //获取对象的某个属性
			//alert("userName's type="+userNameType);
			//alert("userName's label="+$('#idUserName').attr('label'));
			//$('#idUserName').attr('type','button'); //修改属性值！！
		});
		function infoCheck()
		{
			
			
			
			
			
		
			var un = $('#idUserName');
			if(un.val() == '') {
				alert("姓名不能为空！");
				  return false;
			}
			
			var uk = $('#password');
			if(uk.val() == '')
				{
					alert("密码不能为空！");
					return false;
				}
			var p = uk.val().length;
			if(p < 6 || p > 12)
				{
					alert("密码必须长度6~12");
					return false;
				}
			
			var val=$('input:radio[name="userSex"]:checked').val();
			 if(val==null){
	                alert("请勾选性别!");
	                return false;}
			 
			 var valLove=$('input:checkbox[name="userRelax"]:checked').val();
			 if(valLove==null){
	                alert("请勾选爱好!");
	                return false;}
			 
			 var uu = $('#userJob');
			 var  valp  = uu.val();
			if(valp == 0)
				{
					alert("职业必选");
					return false;
				}
			 else
				return true;
		}
		
		function show(){
			//$('form:eq(0)').addClass('blueColor');
				var flag = infoCheck();
				if(flag == true)
					{
						var userName=$('#idUserName').val(); 
						alert("姓名："+userName);
						
						var passWord = $('#password').val();
						alert("密码："+passWord);
						
						var val=$('input:radio[name="userSex"]:checked').val();
						if(val == 0)
							val = "男";
						else
							val = "女";
						alert("性别："+val);
						
						 var chk_value =[]; 
						    $('input[name="userRelax"]:checked').each(function(){ 
						        chk_value.push($(this).val()); 
						    }); 
						for(var o=0;o<chk_value.length;o++)
						{
							if(chk_value[o] == 0)
							alert("爱好：游泳");
							if(chk_value[o] == 1)
							alert("爱好：阅读");
							if(chk_value[o] == 2)
							alert("爱好：篮球");
						}
						var uu = $('#userJob');
						var  valp  = uu.val();
						if(valp == 10)
							alert("职业：护士");
						if(valp == 20)
							alert("职业：医生");
						if(valp == 30)
							alert("职业：教师");
						if(valp == 40)
							alert("职业：自由职业");
					}
				
		//	$('input[name=userSex]').each(function(){
			//alert($(this).attr('sexLabel')); //每次输出：<input name="userSex">元素的sexLabel属性值
		//});
		}
		function remove(){
			$('form:eq(0)').removeClass('blueColor');
		}
	</script>
  </head>
  
  <body>
  <input type="button" value="showInfo" onclick="show()"/><input type="button" value="showInfo" onclick="remove()"/>
  <form name="formName" action="formResult.jsp" method="get">
	     <table border="1" cellpadding="5" cellspacing="0">
	    	<caption>新增用户 </caption>
	    	<tr>	    		
	    		<td>姓名：</td>
	    		<td><input id="idUserName" type="text" name="userName" value="张三" label='输入姓名' />&nbsp;<span style="color:red">*</span>&nbsp;<span id="userNameErrSpan" style="color:red"></span></td>
	    	</tr>
	    	<tr>	    		
	    		<td>密码：</td>
	    		<td><input id= "password" type="password" name="userPwd"/>&nbsp;<span style="color:red">*</span>&nbsp;<span id="userPwdErrSpan" style="color:red"></span></td>
	    	</tr>
	    	<tr>	    		
	    		<td>性别：</td>
	    		<td><input  id = "radio1"type="radio" name="userSex" value="0" sexLabel="男" label="性别：男">男
	    		    <input  id = "radio2"type="radio" name="userSex" value="1" sexLabel="女" >女&nbsp;<span style="color:red">*</span>&nbsp;<span id="userSexErrSpan" style="color:red"></span></td>
	    	</tr>
	    	<tr>    		
	    		<td>爱好：</td>
	    		<td><input type="checkbox" name="userRelax" value="0">游泳
	    		    <input type="checkbox" name="userRelax" value="1" >阅读
	    		    <input type="checkbox" name="userRelax" value="2">篮球&nbsp;<span style="color:red">*</span>&nbsp;<span id="userRelaxErrSpan" style="color:red"></span></td>    		
	    	</tr>
	    	<tr>    		
	    		<td>职业：</td>
	    		<td><select id="userJob" name="userJob" > <!--  size="10" multiple="true"-->
	    				<option value="">请选择职业 </option>
	    				<option value="10" >护士 </option>
	    				<option value="20">医生</option>
	    				<option value="30">教师 </option>
	    				<option value="40">自由职业 </option>
	    		    </select>
	    		    &nbsp;<span style="color:red">*</span>&nbsp;<span id="userJobErrSpan" style="color:red"></span>
	    		    </td>    		
	    	</tr>
	    	<tr>
	    		<td>头像：</td>
	    		<td><input type="file" name="userFace" /></td>
	    		
	    	</tr>
	    	<tr>
	    		<td>备注：</td>
	    		<td><textarea name="bz" cols="100" rows="10">备注内容</textarea></td>
	    		
	    	</tr>
	    	<tr>
	    		<td colspan="2" align="center">
	    		<input type="button" value="提交"  onclick="show()"/>
	    		<input type="reset" value="重置"/>
	    		</td>
	    		
	    	</tr>	    	
	    </table>
	    
  </form> 
    
  </body>
</html>
